<template>
	<div class="books_star_wrapper">
		<el-row :gutter="40">
			<el-col :span="12" v-for="(item, index) in listDatas" :key="index">
				<dl>
					<dt><img :src="!item.httpUrl ? siteInfo.articleImg.httpUrl : item.httpUrl" alt="" /></dt>
					<dd>
						<h4>{{ item.title }}</h4>
						<p>{{ item.outline }}</p>
						<el-button size="small" plain @click="handleLookDetail(item.id)">
							查看详情
							<i class="el-icon-arrow-right"></i>
						</el-button>
					</dd>
				</dl>
			</el-col>
		</el-row>
		<sw-pagination :total="dataCount" :page.sync="listQuery.page" :limit.sync="listQuery.limit" notice="数据"></sw-pagination>
	</div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex';
export default {
	data() {
		return {
			dataCount: 0,
			listQuery: {
				page: 1,
				limit: 10
			},
			listDatas: []
		};
	},
	computed: {
		...mapGetters(['siteInfo']),
		routerPath() {
			return this.$route.path;
		}
	},
	mounted() {
		this.getNewsListData();
	},
	methods: {
		...mapActions(['getNewsData']),
		//获取文件机关动态数据
		getNewsListData() {
			this.getNewsData({ ...this.listQuery, classifyId: '215' }).then(res => {
				this.dataCount = parseInt(res.count);
				this.listDatas = !res.data ? [] : res.data;
			});
		},

		//查看详情
		handleLookDetail(id) {
			this.$router.push({
				path: '/books/star/' + id
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.books_star_wrapper {
	display: flex;
	flex-direction: column;
	padding-bottom: 64px;
	box-sizing: border-box;
	.el-row {
		flex: 1;
		overflow: hidden;
	}
	.el-col {
		margin-bottom: 40px;
	}
	dl {
		display: flex;
		align-items: flex-start;
		padding: 24px;
		border: solid 1px #ebedee;
		&:hover {
			box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
		}
	}
	dt {
		width: 128px;
		height: 128px;
		flex-shrink: 0;
		margin-right: 24px;
	}
	img {
		display: block;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		object-fit: cover;
	}
	dd {
		flex: 1;
		overflow: hidden;
	}
	h4 {
		font-size: 18px;
		height: 20px;
		line-height: 20px;
		margin-bottom: 10px;
	}
	span {
		display: block;
		color: rgba(0, 0, 0, 0.56);
	}
	p {
		display: -webkit-box;
		line-height: 24px;
		margin-top: 14px;
		height: 96px;
		overflow: hidden;
		-webkit-box-orient: vertical;
		line-clamp: 4;
		-webkit-line-clamp: 4;
		color: rgba(0, 0, 0, 0.4);
	}
	.el-button--small {
		float: right;
		margin-top: 10px;
		&:focus,
		&:hover {
			color: #357c65;
			border-color: #357c65;
		}
	}
	.el-icon-arrow-right {
		font-weight: bold;
		color: #357c65;
	}
}
</style>
